<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
    <script>
        function doCalc(obj) {
            var one = document.getElementById("one");
            var two = document.getElementById("two");
            var res = document.getElementById("res");
            // console.log(one.value);
            // console.log(two.value);
            // console.log(obj.innerHTML);
            // console.log(eval(one.value + obj.innerText + two.value));
            var result = eval(one.value + obj.innerText + two.value);
            res.value = result;

        }
    </script>
</head>

<body>
    <h2>计算器</h2>
    <div class="box">
        <div class="box1">
            <div class="text">第一个数&nbsp;&nbsp;:</div>
            <div class="input">
                <input type="text" id="one">
            </div>
        </div>
        <div class="box1">
            <div class="text">第二个数&nbsp;&nbsp;:</div>
            <div class="input">
                <input type="text" id="two">
            </div>
        </div>
        <div class="box2">
            <div onclick="doCalc(this)" class="calc">+</div>
            <div onclick="doCalc(this)" class="calc">-</div>
            <div onclick="doCalc(this)" class="calc">*</div>
            <div onclick="doCalc(this)" class="calc">/</div>
        </div>
        <div class="box1">
            <div class="text">&nbsp;&nbsp;&nbsp;&nbsp;结果&nbsp;&nbsp;:</div>
            <div class="input">
                <input type="text" id="res">
            </div>
        </div>
    </div>
</body>

</html>